<template>
	<div class="left_nav">
		<el-row class="tac">
			<el-col :span="24">
				<el-menu default-active="2" unique-opened="true" class="el-menu-vertical-demo" @open="handleOpen" background-color="#FCFCFC" @close="handleClose">
					<el-submenu :index="list.mid" v-for='list in lists' :key="list.mid">
						<template slot="title">
							<i class="el-icon-menu"></i>
							<span>{{ list.mname }}</span>
						</template>
						<el-menu-item-group>
							<el-menu-item v-for="clist in list.children" :index="clist.mid" :key="clist.mid">
								<router-link :to="clist.url">{{clist.mname}}</router-link>
							</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
				</el-menu>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			lists: {
				type: Array,
				required: true
			}
		},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			}
		}
	}
</script>